<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帖子列表 - AIHub</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/posts.css}">
    <!-- 在每个HTML文件的head部分添加 -->
    <link rel="stylesheet" th:href="@{/css/category.css}">
    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/posts.js}"></script>
</head>
<body>
    <div class="container">
        <h2>帖子列表</h2>
        
        <!-- 添加创建帖子按钮和分类筛选 -->
        <div class="action-buttons">
            <a href="/" class="btn">返回首页</a>
            <a href="/create-post" class="btn btn-primary">创建帖子</a>
            
            <!-- 添加分类筛选下拉框 -->
            <div class="category-filter-container">
                <label for="categoryFilter">分类筛选:</label>
                <select id="categoryFilter" class="category-filter">
                    <!-- 分类选项将通过JavaScript动态加载 -->
                    <option value="all">全部分类</option>
                </select>
            </div>
        </div>
        
        <div class="posts-container">
            <!-- 帖子内容将通过Thymeleaf动态渲染 -->
            <th:block th:if="${posts != null and not posts.isEmpty()}">
                <div class="post-item" th:each="post : ${posts}" th:attr="data-post-id=${post.id}">
                    <!-- 显示视频 -->
                    <th:block th:if="${post.videoUrl != null}">
                        <div class="video-container">
                            <video class="hover-video" th:poster="${post.videoThumbnailUrl}" loop muted>
                                <source th:src="${post.videoUrl}" type="video/mp4">
                            </video>
                            <div class="play-icon"></div>
                        </div>
                    </th:block>
                    
                    <!-- 显示封面图片 -->
                    <th:block th:unless="${post.videoUrl != null}">
                        <th:block th:if="${post.coverImageUrl != null}">
                            <img th:src="@{${post.coverImageUrl}}" alt="封面图片" class="post-cover-image">
                        </th:block>
                    </th:block>
                    
                    <h3 th:text="${post.title}">帖子标题</h3>
                    
                    <!-- 显示帖子分类标签 -->
                    <th:block th:if="${post.category != null}">
                        <span class="post-category" th:text="${post.category.displayName}">分类</span>
                    </th:block>
                    
                    <p th:text="${post.content}">帖子内容...</p>
                    <div class="post-meta">
                        <span th:text="${post.user.username}">作者</span>
                        <span th:text="${#temporals.format(post.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                        <span>浏览: <span th:text="${post.viewCount}">0</span></span>
                        <span>点赞: <span th:text="${post.likeCount}">0</span></span>
                        <span>评论: <span th:text="${post.commentCount}">0</span></span>
                        <button class="comment-btn">评论</button>
                    </div>
                </div>
            </th:block>
            
            <!-- 当没有帖子时显示提示 -->
            <div th:unless="${posts != null and not posts.isEmpty()}" class="no-posts">
                <p>暂无帖子</p>
            </div>
        </div>
    </div>
</body>
</html>